<template>
  <section ref="imgContainer" class="demo">
    <Table :data="list" :column-config="columnConfig" :use-cusdom-header="true">
      <template v-slot:test="slotProps">
        <el-button>{{ slotProps.row.name }}</el-button>
      </template>
      <template v-slot:id="slotProps">
        <el-button>{{ slotProps.index }}</el-button>
      </template>
    </Table>
    <div class="tooltip">
      <TextTooltip
        :rows="2"
        content="撒空间将建军节建军节建军节建军节建军节建军节建军节建军节建军节建军节建军节建军节"
      />
    </div>
    <RuleTable />
    <el-button @click="getScroll">生成</el-button>
    <el-dialog :visible.sync="showImg">
      <img :src="imgUrl" alt="" />
    </el-dialog>
    <Count :end-val="520" />
    <VirtualTree :tree-list="treeList" />
  </section>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  name: 'Demo',
  components: {},
  sockets: {
    // 通过vue实例对象sockets实现组件中的事件监听
    connect: function () {
      // socket的connect事件
      console.log('socket connected from Page')
    },
    rec(data) {
      // 后端按主题名推送的消息数据
      console.log('Page：' + data)
    }
  },
  data() {
    return {
      treeList: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      showImg: false,
      imgUrl: '',
      list: [
        {
          name: 'sasa',
          id: '1'
        },
        {
          name: 'hhh',
          id: '2'
        }
      ],
      columnConfig: [
        {
          attr: {
            prop: 'name',
            label: 'asdfghjkuyrqwetwesdfsdgfdhfgjfgjfghdfgsdsdsdgrwe'
          },
          scopedSlot: 'test'
        },
        {
          attr: {
            prop: 'id',
            label: 'asdfghjkusadsafsa'
          },
          scopedSlot: 'id'
        }
      ]
    }
  },
  mounted() {
    this.$socket.emit('send', 'hhh')
    for (let index = 0; index < 200; index++) {
      let item = {
        label: `一级 1${index}`,
        children: [
          {
            label: '二级 1-1',
            children: [
              {
                label: '三级 1-1-1'
              }
            ]
          }
        ]
      }
      this.treeList.push(item)
    }
  },
  methods: {
    toImg() {
      html2canvas(this.$refs.imgContainer, {
        // 转换为图片
        useCORS: true // 解决资源跨域问题
      }).then(canvas => {
        console.log(canvas, 'canvas')
        let dataURL = canvas.toDataURL('image/png')
        this.showImg = true
        this.imgUrl = dataURL
      })
    },
    getScroll() {
      var targetDom = document.getElementsByClassName('demo')[0]
      var copyDom = targetDom.cloneNode(true) // 克隆节点
      copyDom.style.width = '1200px' //targetDom.offsetWidth + 'px'
      // document
      //     .getElementsByClassName('el-table')[0]
      //     .getElementsByTagName('table')[0].
      copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度
      document.body.appendChild(copyDom) // 插入节点
      html2canvas(copyDom).then(canvas => {
        document.body.removeChild(copyDom) // 删除节点
        var dataURL = canvas
          .toDataURL('image/png')
          .replace('image/png', 'image/octet-stream') // 获取生成的图片的url
        this.showImg = true
        this.imgUrl = dataURL
        // var saveLink = document.createElement('a')
        // saveLink.href = imgUri
        // saveLink.download = 'downLoad.png'
        // saveLink.click()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tooltip {
  width: 100px;
  border: 1px solid #ccc;
  margin-bottom: 40px;
}
.demo {
  // height: 500px;
  // overflow: auto;
}
</style>
